<!--
 * @Author: your name
 * @Date: 2022-03-25 13:25:40
 * @LastEditTime: 2022-03-25 15:23:32
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \学习笔记\css\pseudo\part.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
      /**
        * 该 ::part CSS 伪元素 表示在 阴影树 中任何匹配 part 属性的元素。
        * 也就是js代码中的
        * this.attachShadow({ mode: "open" });
        * this.shadowRoot.appendChild(template.content);
        */

        /**
        * CSS 伪类函数 :host() 选择包含使用这段 CSS 的 Shadow DOM 的影子宿主（这样就可以从 Shadow DOM 中选择包括它的自定义元素）——但前提是该函数的参数与选择的阴影宿主相匹配。
        * 样式并不能被继承：直接写:host{ color: red; }只会对没有被标签包裹的内容生效
        * 哪怕在宿主元素(shadow-root)使用class都是没有作用的，只能通过part或者<context-span>标签进行设置（详见host2）
        */
    tabbed-custom-element::part(tab) {
      color: yellow;
      border-bottom: transparent solid 2px;
    }

    tabbed-custom-element :host {
           display: block;
    }

    tabbed-custom-element::part(tab):hover {
      background-color: #0c0d19;
      border-color: #0c0d33;
    }

    tabbed-custom-element::part(tab):hover:active {
      background-color: #0c0d33;
    }

    tabbed-custom-element::part(tab):focus {
      box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff,
        0 0 0 4px rgba(10, 132, 255, 0.3);
    }

    tabbed-custom-element::part(active) {
      color: #0060df;
      border-color: #0a84ff !important;
    }
  </style>
  <body>
    <template id="tabbed-custom-element">
      <style type="text/css">
        *,
        ::before,
        ::after {
          box-sizing: border-box;
          padding: 1rem;
        }

        /**
        * 这行的代码意思是宿主元素带有table这个calss的时候才生效这个样式
        * eg:<tabbed-custom-element class="table"></tabbed-custom-element>
        */
        :host-context(.table) {
          color: green;
        }

        :host-context(h1) {
          color: burlywood;
        }
        :host {
          display: flex;
          padding: 100px;
          background-color: pink;
        }
      </style>
      这是没有标签的文字
      <div part="tab active">Tab 1</div>
      <div part="tab" class="table">Tab 2</div>
      <div part="tab">Tab 3</div>
    </template>

    <!-- <h1>
    <tabbed-custom-element></tabbed-custom-element>
    </h1> -->
    <tabbed-custom-element></tabbed-custom-element>
    12
    <tabbed-custom-element></tabbed-custom-element>
    45
    <tabbed-custom-element></tabbed-custom-element>


    
  </body>
  <script>
    let template = document.querySelector("#tabbed-custom-element");
    globalThis.customElements.define(
      template.id,
      class extends HTMLElement {
        constructor() {
          super();
          this.attachShadow({ mode: "open" });
          this.shadowRoot.appendChild(template.content);
        }
      }
    );
  </script>
</html>
